<template>
  <BaseForm v-model="formDataModel" @close="$emit('callBack')"/>

</template>

<script lang="ts" setup>
    import type { FormInstance } from 'element-plus'
    import StaffClockApi from '/@/api/webPath/StaffClockApi.ts';
    import { translate } from "/@/i18n";
    import FORM_FIELD_TYPE from "/@/constants/FormFieldType.ts";
import { useEnumList } from '~/src/utils/useEnumList';
    defineOptions({
        name: 'StaffClockEdit',
    })
    const props = defineProps({
        modelValue: {

        }
    })
    const emit = defineEmits(['fetch-data','callBack'])

    const formRef = ref<FormInstance>();
    const title = ref<string>('');
    const dialogFormVisible = ref<boolean>(false);
    const staffClockTypeEnumList = useEnumList("ClockType")



    const formDataModel = ref({
        columnCount: 1,
        expandLimit: 6,
        autoFit: false,
        columnWidth: '300px',
        labelPosition: 'right',
        labelWidth: '100px',
        modelData: {},  //表单参数值 初始化
        callback: async (any: object) => {  //表单执行成功后回调
            //完成数据提交
            const { message } = await StaffClockApi.save(any)
                $baseMessage(message, 'success', 'vab-hey-message-success');
            dialogFormVisible.value = false


            //事件及数据推送到上一层父类
            emit('callBack', any); //把表单数据推送到上一层
        },
        items: [  //表单item数据初始化
                      {
                label: "人员名称",
                field: "staffName",
                clearable: true,
                type: FORM_FIELD_TYPE.INPUT,

               placeholder:"请输入",

               rule:{
                 trigger: 'blur',
                 validator: (rule: any, value: any, callback: any) => {  //绑定验证
                       callback();
                   },
                 },

            },
            //   {
            //     label: "人员id",
            //     field: "staffId",
            //     clearable: true,
            //     type: FORM_FIELD_TYPE.INPUT,

            //    placeholder:"请输入",

            //    rule:{
            //      trigger: 'blur',
            //      validator: (rule: any, value: any, callback: any) => {  //绑定验证
            //            callback();
            //        },
            //      },

            // },
              {
                label: "打卡类型",
                field: "clockType",
                clearable: true,
                type: FORM_FIELD_TYPE.SINGLE_LAYER_SELECT,
                // options: [
                //   {
                //     label: "上班",
                //     value: "in"
                //   },
                //   {
                //     label: "下班",
                //     value: "out"
                //   },
                // ],
                options: staffClockTypeEnumList,

               placeholder:"请输入",

               rule:{
                 trigger: 'blur',
                 validator: (rule: any, value: any, callback: any) => {  //绑定验证
                       callback();
                   },
                 },

            },
              {
                label: "打卡时间",
                field: "clockTime",
                clearable: true,
                type: FORM_FIELD_TYPE.DATETIME,
               placeholder:"请输入",

               rule:{
                 trigger: 'blur',
                 validator: (rule: any, value: any, callback: any) => {  //绑定验证
                       callback();
                   },
                 },

            config: {
                props: {   //日期精度配置
                     type: "daterange",
                    startPlaceholder: "开始日期",
                    endPlaceholder: "结束日期",
                    format: "YYYY-MM-DD",
                      }
               },
            },
              {
                label: "排序",
                field: "sort",
                clearable: true,
                type: FORM_FIELD_TYPE.INPUTNUMBER,
                defaultValue: 0,

               placeholder:"请输入",

               rule:{
                 trigger: 'blur',
                 validator: (rule: any, value: any, callback: any) => {  //绑定验证
                       callback();
                   },
                 },

            },
            //                                   {
            //     label: "所属公司",
            //     field: "companyId",
            //     clearable: true,
            //     type: FORM_FIELD_TYPE.INPUT,

            //    placeholder:"请输入",

            //    rule:{
            //      trigger: 'blur',
            //      validator: (rule: any, value: any, callback: any) => {  //绑定验证
            //            callback();
            //        },
            //      },

            // }
        ],
    })






    //页面数据加载
    onMounted(async () => {

        //初始化数据model
        if (props.modelValue.query){ //跳转过来时候有参数
            if (props.modelValue.query.staffClockId) {  //id存在则为编辑，加载网络数据，如上级页面带参数手动覆盖

                const {data} = await StaffClockApi.getDetail({
                        staffClockId: props.modelValue.query.staffClockId   //从路由中获取参数
                })
                formDataModel.value.modelData = data;
            }else {
                //新增时候则用父类页面传参默认填充可根据业务修改
                for (const key in props.modelValue.query) {
                    formDataModel.value.modelData[key] = props.modelValue.query[key]
                }
            }
        }
    })


    //方法暴露区域  todo
    defineExpose({

    })

</script>
